<template>
    <div class="header">
        <span class="leftContainer">
            <el-icon size="20px" @click="collapsedHandler">
                <component :is="isCollapsed ? expand : fold" />
            </el-icon>
            <el-breadcrumb>
                <el-breadcrumb-item
                    :disabled="homeTagDisabled"
                    :class="homeTagClass"
                    @click="$router.push({ name: 'home' })"
                    >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item v-if="homeTagDisabled">{{ currentPath }}</el-breadcrumb-item>
            </el-breadcrumb>
        </span>
        <el-dropdown>
            <span>
                您好，{{ username }}
                <el-icon>
                    <ArrowDown />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="logoutHandler">注销</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup>
import { Expand, Fold, ArrowDown } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { menuStore } from "@/store/menu";
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { userStore } from "@/store/user";

const menu = menuStore();
const user = userStore();
const router = useRouter();
const route = useRoute();

const expand = Expand;
const fold = Fold;

const isCollapsed = ref(menu.isCollapsed);
const username = ref("admin");
const homeTagDisabled = ref(false);
const homeTagClass = ref("");
const currentPath = ref("");
const obj = {
    "/user-manage": "用户管理",
    "/book-manage/detail": "图书信息",
    "/book-manage/add": "添加图书",
    "/order-manage/send": "订单发货",
    "/order-manage/confirm": "已完成订单",
    "/order-manage/shipping": "配送中订单",
    "/category-manage": "分类管理",
};

watch(route, (oldVal, newVal) => {
    // console.log(oldVal.fullPath);
    currentPath.value = obj[newVal.fullPath];
    if (currentPath.value !== undefined) {
        homeTagDisabled.value = true;
        homeTagClass.value = "homeTagActive";
    } else {
        homeTagDisabled.value = false;
        homeTagClass.value = "";
    }
});

const collapsedHandler = () => {
    isCollapsed.value = !isCollapsed.value;
    menu.isCollapsed = isCollapsed.value;
    // menu.setCollapsed(isCollapsed.value);
    localStorage.setItem("isCollapsed", menu.isCollapsed);
};

const logoutHandler = () => {
    ElMessageBox({
        type: "warning",
        title: "退出登录",
        message: "确定要退出吗？",
        cancelButtonText: "取消",
        confirmButtonText: "确认",
        showCancelButton: true,
    }).then((res) => {
        ElMessage({
            type: "success",
            message: "退出成功，正在跳转",
        });
        setTimeout(() => {
            user.destroyToken();
            user.setLogin();
            router.push({ name: "login" });
            // window.location.reload();
        }, 200);
    });
};
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    flex-direction: row;
    height: 60px;
    align-items: center;
    justify-content: space-between;

    .leftContainer {
        display: flex;
        align-items: center;

        .el-icon {
            cursor: pointer;
            margin-right: 1rem;
        }

        .homeTagActive {
            cursor: pointer;

            .span {
                color: black;
            }
        }
    }

    .el-dropdown {
        cursor: default;

        .el-icon {
            cursor: default;
        }
    }
}
</style>
